<template>
	<view class="yuechongzhi">
		<headertop str1="oridei" title="余额提现"></headertop>
		<image src="https://shop.hacuu.com/static/Rectangle 21541@2x.png" class="yuechongzhiback" mode=""></image>
		<view class="dqyue">
			<image src="/static/wxGroup 11624@2x.png" class="dqyueimg" mode=""></image>
			<view class="" style="margin: auto;
				margin-top: 58rpx;width: 622rpx;display: flex;align-items: center;">
				<view class="text">
					<view class="t1">
						当前账户余额
					</view>
					<view class="t2">
						{{userobj.money}}
					</view>
				</view>
				<view class="text">
					<view class="t1">
						当前冻结金额
					</view>
					<view class="t2">
						{{userobj.djyeji}}
					</view>
				</view>
			</view>

			<view class="czbox">
				<view class="czjl" @click="gopage('账户管理')">
					<image src="/static/wxFrame@2x(1).png" class="icon" mode=""></image>
					<span>账户管理</span>
				</view>
				<view class="jiange">

				</view>
				<view class="czjl" @click="gopage('余额提现')">
					<image src="https://shop.hacuu.com/static/Frame@2x (29).png" class="icon" mode=""></image>
					<span>余额提现</span>
				</view>
			</view>
		</view>
		<view class="czbox1">
			<view class="centrr">
				<view class="title1">
					<view class="border">

					</view>
					<view class="jine">
						提现金额
					</view>
				</view>
				<view class="fenleiw">
					<view @click="qiehuan(3)" :class="query['status']==3?'itembox activecolor':'itembox'">
						全部
						<view class="activebox" v-if="query['status']==3">

						</view>
					</view>
					<view @click="qiehuan(0)" :class="query['status']==0?'itembox activecolor':'itembox'">
						待审核
						<view class="activebox" v-if="query['status']==0">

						</view>
					</view>
					<view @click="qiehuan(1)" :class="query['status']==1?'itembox activecolor':'itembox'">
						待打款
						<view class="activebox" v-if="query['status']==1">

						</view>
					</view>
					<view @click="qiehuan(2)" :class="query['status']==2?'itembox activecolor':'itembox'">
						已完成
						<view class="activebox" v-if="query['status']==2">

						</view>
					</view>
				</view>
				<view class="contentboos">
					<view class="msgicon" v-if="!list.length">
						<image src="https://shop.hacuu.com/static/Frame@2x(21).png" mode="widthFix"></image>
						<view class="msgtext">
							暂无内容
						</view>
					</view>
					<view class="itemcontentboos" v-for="(item,index) in list" :key="index">
						<view class="leftbox">
							<view class="tt">
								<view class="bsbox"
									:style="{'color':colorfun(item.status),'background':backgroundfun(item.status)}">
									{{item.status_text}}
								</view>
								<span>提现</span>
							</view>
							<view class="tt1">
								{{item.createtime}}
							</view>
						</view>
						<view class="rightnum">
							+{{item.amount}}
						</view>
					</view>
				</view>


			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		moneylist,
		userinfo,
		rechargeorder,
		prepay,
		tixian
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import headertop from '@/components/header.vue'
	import {
		ref,
		watch,
		reactive
	} from 'vue'
	const query = reactive({
		page: 1,
		list_rows: 10,
		status: 3,
	})
	const arr = ref([])
	const userobj = ref({})
	const moneyobj = ref({})
	const flag = ref(false)
	const money = ref('')
	const list = ref([])
	const active = ref(-1)
	const lastpage = ref(0)
	onShow(() => {
		query.page = 1
		list.value = []
		init()
		getuser()
	})
	// :-1=已拒绝,0=待审核,1=处理中,2=已处理,3:全部
	function backgroundfun(num) {
		if (num == -1) {
			return '#FFF7E8'
		} else if (num == 0) {
			return '#FFF7E8'
		} else if (num == 1) {
			return '#FFECE8'
		} else if (num == 2) {
			return '#E8FFEA'
		}
	}

	function colorfun(num) {
		if (num == -1) {
			return '#FFF7E8'
		} else if (num == 0) {
			return '#FF7D00'
		} else if (num == 1) {
			return '#F53F3F'
		} else if (num == 2) {
			return '#00B42A'
		}
	}
	watch(money, (newval, oldval) => {
		if (newval) {
			var ind = moneyobj.value.quick_amounts.findIndex(item => item.money * 1 == newval * 1)
			active.value = ind
		}
	})
	onPageScroll((e) => {
		console.log(e, 'eeeeeeeeeeeeeee');
		// if (e.scrollTop > 100) {
		// 	back1.value = '#84BD78'
		// } else {
		// 	back1.value = ''
		// }
		if (lastpage.value > query.page) {
			query.page++
			init()
		}
	})

	function qiehuan(num) {
		query['status'] = num
		query.page = 1
		list.value = []
		init()
	}

	function gopage(str) {
		if (str == '账户管理') {
			uni.navigateTo({
				url: '/pages/my/zhgl'
			})
		} else if (str == '余额提现') {
			uni.navigateTo({
				url: '/pages/my/tx'
			})
		}
	}
	async function init() {
		const res = await tixian(query)
		if (res.code == 1) {
			list.value.push(...res.data.data)
			lastpage.value = res.data.last_page
		}
	}
	async function getuser() {
		const res = await userinfo()
		if (res.code == 1) {
			userobj.value = res.data
		}
	}



	async function lijikaitong() {
		if (!flag.value) {
			uni.showToast({
				icon: 'none',
				title: '请勾选服务协议'
			})
			return
		}
		if (money.value < 0 || !money.value) {
			uni.showToast({
				title: '充值金额必须大于0且不能为空',
				icon: 'none'
			})
			return
		}
		const res = await rechargeorder({
			recharge_money: money.value
		})
		if (res.code == 1) {
			const res1 = await prepay({
				order_sn: res.data.order_sn,
				payment: 'wechat'
			})
			var payobj = res1.data.pay_data
			console.log(payobj, 'res。data---------');
			uni.requestPayment({
				timeStamp: String(payobj.timestamp),
				nonceStr: payobj.noncestr,
				package: payobj.package,
				signType: 'MD5',
				paySign: payobj.sign,
				success(res) {
					setTimeout(() => {
						uni.showToast({
							title: '充值成功',
							icon: 'none'
						})
					}, 500)
					money.value = ''
					uni.navigateBack()
				},
				fail(e) {
					uni.showToast({
						title: '支付失败',
						icon: 'none'
					})
					console.log('支付失败--------------', e);
				}
			})

		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
</script>
<style lang="scss">
	.activecolor {
		color: #A46F3A;
	}

	.msgicon {
		width: 608rpx;
		margin: 100rpx auto;
		overflow: hidden;

		.msgtext {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #86909C;
			text-align: center;
			width: 100%;
			margin-top: -30rpx;
		}

		image {
			width: 608rpx;
		}
	}

	.yuechongzhi {
		width: 100%;
		overflow: hidden;
		position: relative;

		.yuechongzhiback {
			width: 100%;
			height: 314rpx;
			position: absolute;
			z-index: -1;
		}

		.czbox1 {
			width: 100%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(221, 195, 123, 0.41);
			border-radius: 40rpx 40rpx 0rpx 0rpx;
			overflow: hidden;
			margin-top: -30rpx;

			.centrr {
				width: 686rpx;
				margin: auto;
				overflow: hidden;

				.contentboos {
					width: 100%;
					overflow: hidden;
					margin-top: 16rpx;

					.itemcontentboos {
						width: 100%;
						height: 146rpx;
						background: #F7F8FA;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 20rpx;

						.rightnum {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 36rpx;
							color: #D5151A;
							margin-right: 32rpx;
						}

						.leftbox {
							margin-left: 32rpx;

							.tt1 {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #86909C;
								margin-top: 10rpx;
							}

							.tt {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 28rpx;
								color: #1D2129;

								.bsbox {
									width: 88rpx;
									height: 40rpx;
									background: #FFF7E8;
									border-radius: 4rpx 4rpx 4rpx 4rpx;
									margin-right: 4rpx;
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: #FF7D00;
									text-align: center;
									line-height: 40rpx;
								}
							}
						}
					}
				}

				.fenleiw {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-top: 24rpx;

					.itembox {
						padding: 0 40rpx;
						height: 84rpx;
						position: relative;
						display: flex;
						flex-direction: column;
						align-items: center;
						line-height: 84rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #1D2129;

						.activebox {
							width: 48rpx;
							height: 4rpx;
							background: #A46F3A;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							position: absolute;
							bottom: 0%;
						}
					}
				}




				.title1 {
					width: 100%;
					display: flex;
					align-items: center;
					margin-top: 32rpx;

					.border {
						width: 4rpx;
						height: 32rpx;
						background: #D8A278;
						border-radius: 24rpx 24rpx 24rpx 24rpx;
					}

					.jine {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #1D2129;
						margin-left: 16rpx;
					}
				}
			}
		}

		.dqyue {
			width: 730rpx;
			height: 396.38rpx;
			position: relative;
			margin: auto;
			margin-top: 188rpx;
			overflow: hidden;

			.dqyueimg {
				width: 100%;
				height: 396.38rpx;
				position: absolute;
				z-index: -1;
			}

			.czbox {
				width: 622rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 70rpx;
				border-top: 2rpx solid rgba(255, 255, 255, 0.49);
				display: flex;
				align-items: center;

				.jiange {
					width: 2rpx;
					height: 52rpx;
					background: rgba(255, 255, 255, 0.49);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					margin-top: 12rpx;
				}

				.czjl {
					width: 50%;
					display: flex;
					align-items: center;
					margin-top: 18rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #926322;
					justify-content: center;

					.icon {
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
				}
			}

			.text {
				width: 310rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: hidden;

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #926322;
				}

				.t2 {
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 56rpx;
					color: #642D13;
					margin-top: 38rpx;
				}
			}
		}
	}
</style>